import React from 'react';
import cn from 'classnames';
import pic from '../../../images/icon-arrow.png';
import styles from './index.less';

const ListItem = ({
    title,
    children,
    required = true,
    icon,
    showArrow = true,
    bordered = true,
    onClick,
    titleStyle,
    contentStyle,
    extra,
    iconStyle,
    ...rest
}) => (
    <div className={cn(styles.listItem, { [styles.hasBorder]: bordered })} {...rest}>
        <div className={cn(styles.title, { [styles.hasIcon]: showArrow })} onClick={onClick} style={titleStyle}>
            {title}
            {!required && <span style={{ color: '#BBC1CE' }}>（选填）</span>}
            {showArrow && (
                <div className={styles.icon} style={iconStyle}>
                    {extra}
                    {icon || <img alt="" src={pic} style={extra ? { marginLeft: 8 } : {}} />}
                </div>
            )}
        </div>
        {children && (
            <div style={{ paddingBottom: 16, fontSize: 14, color: '#2A2F3C', ...contentStyle }}>{children}</div>
        )}
    </div>
);

export default ListItem;
